<template>
  <div class="full-height-div">
    <div class="st-tbox">
      <div class="tirleName">富林中电32-22B自动线看板</div>
      <div class="tlitaData">
        <div style="flex: 1;">
          <div class="itemData" style="border-left: 2px solid #fff;">
            <div style="margin-top: 20px;">产品型号</div>
            <div style="padding: 3px 20px;">product Type</div>
          </div>
          <div class="itemData" style="line-height: 104px;border-left: 2px solid #fff;">{{
            tableData.model }}
          </div>
        </div>
        <div style="flex: 1;">
          <div class="itemData">
            <div style="margin-top: 20px;">状态</div>
            <div style="padding: 3px 20px;">Stat</div>
          </div>
          <div class="itemData" style="line-height: 104px;">{{ tableData.status }}</div>
        </div>
        <div style="flex: 1;">
          <div class="itemData">
            <div style="margin-top: 20px;">计划产量</div>
            <div style="padding: 3px 20px;">Planed Output</div>
          </div>
          <div class="itemData" style="line-height: 104px;">{{ tableData.planned }}</div>
        </div>
        <div style="flex: 1;">
          <div class="itemData">
            <div style="margin-top: 20px;">实际产量</div>
            <div style="padding: 3px 20px;">Actuul Qutput</div>
          </div>
          <div class="itemData" style="line-height: 104px;">{{ tableData.actual }}</div>
        </div>
        <div style="flex: 1;">
          <div class="itemData">
            <div style="margin-top: 20px;">达成率</div>
            <div style="padding: 3px 20px;">Achievumont rate</div>
          </div>
          <div class="itemData" style="line-height: 104px;">{{ tableData.achieving }}</div>
        </div>
        <div style="flex: 1;">
          <div class="itemData">
            <div style="margin-top: 20px;">合格率</div>
            <div style="padding: 3px 20px;">Pass Ratio</div>
          </div>
          <div class="itemData" style="line-height: 104px;">{{ tableData.complete }}</div>
        </div>
        <div style="flex: 1;">
          <div class="itemData">
            <div style="margin-top: 20px;">停机时间</div>
            <div style="padding: 3px 20px;">Doun Time</div>
          </div>
          <div class="itemData" style="line-height: 104px;">{{ tableData.downoff }}</div>
        </div>
        <div style="flex: 1;">
          <div class="itemData">
            <div style="margin-top: 20px;">运行时间</div>
            <div style="padding: 3px 20px;">RunaLng Time</div>
          </div>
          <div class="itemData" style="line-height: 104px;">{{ tableData.runningon }}</div>
        </div>
      </div>

      <div>
        <div class="centerData">

          <div class="FontReit">
            <span>实时理论时均产量</span>
            <span style="margin-left: 20px;">{{ tableData.theory }}</span>
          </div>
          <div class="FontReit">
            <span>上一班次产能</span>
            <span style="margin-left: 20px;">{{ tableData.capacity }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="st-gbox">
      <div class="container">
        <div class="label">Min</div>
        <div class="dataTime" id="bighgiht">
          <div class="line-group">
            <div class="line"></div>
            <div>60</div>
            <div class="lineButt">
              <div class="line-label" v-for="(item, index) in totleList" :key="index">{{ item }}</div>
            </div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>55</div>

          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>50</div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>45</div>
            <div class="lineButt">
              <div class="pillar" v-for="(height, index) in firstLabelFuor" :key="index"
                :style="{ height: getHeightFuor(index) + 'px' }" @click="EiteData(height)">{{ height.capacity }}</div>
            </div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>40</div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>35</div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>30</div>
            <div class="lineButt">
              <div class="pillar" v-for="(height, index) in firstLabelThere" :key="index"
                :style="{ height: getHeightThere(index) + 'px' }" @click="EiteData(height)">{{ height.capacity }}</div>
            </div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>25</div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>20</div>
          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>15</div>
            <div class="lineButt">
              <div class="pillar" v-for="(height, index) in firstLabelTwo" :key="index"
                :style="{ height: getHeightTwo(index) + 'px' }" @click="EiteData(height)">{{ height.capacity }}</div>
            </div>

          </div>

          <div class="line-group">
            <div class="line"></div>
            <div>10</div>
          </div>
          <div class="line-group">
            <div class="line"></div>
            <div>5</div>
          </div>
          <div class="line-group" style="margin-left: 8px;">
            <div class="line"></div>
            <div>0</div>
            <div class="lineButt">
              <div class="pillar" v-for="(height, index) in firstLabels" :key="index"
                :style="{ height: getHeight(index) + 'px' }" @click="EiteData(height)">{{ height.capacity }}</div>
            </div>

          </div>

        </div>
        <div class="bottTime">
          <div v-for="(item, index) in TimeDate" :key="index">{{ item.label_start }}</div>
        </div>
      </div>

    </div>

    <el-dialog title="修改产量" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">


        <el-form-item label="产量">
          <el-input v-model="formLabelAlign.region" type="number" min="0" @input="validateInput"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="formLabelAlign.name" readonly></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDa">确 定</el-button>
      </span>

    </el-dialog>
  </div>

</template>
<script>


import { getoutputlist, roletask, eidrepair } from "@/api/index";



export default {
  name: "welcome",
  data() {
    return {
  
      dialogVisible: false,
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: ''

      },
      zhuheight: null,
      xeit: null,
      tableData: {},
      totleList: [],
      firstLabels: [
   
      ],
      firstLabelTwo: [

      ],
      firstLabelThere: [

      ],
      firstLabelFuor: [

      ],
      TimeDate: [

      ]
    }
  },

  components: {

  },

  created() {
    this.getroletaskList()

  },

  mounted() {
    this.interval = setInterval(() => {
      this.getroletaskList();
    }, 8000);
    window.addEventListener('resize', this.handleResize);
    const element = document.getElementById('bighgiht');
    this.zhuheight = (element.clientHeight - 32) / 4; 

  },
  computed: {

  },
  beforeDestroy() {
    clearInterval(this.interval);
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    getHeight(index) {
      return this.firstLabels[index].capacity >= 100 ? this.zhuheight : this.firstLabels[index].capacity / 100 * this.zhuheight
    },

    getHeightTwo(index) {
      return this.firstLabelTwo[index].capacity >= 100 ? this.zhuheight : this.firstLabelTwo[index].capacity / 100 * this.zhuheight
    },
    getHeightThere(index) {
      return this.firstLabelThere[index].capacity >= 100 ? this.zhuheight : this.firstLabelThere[index].capacity / 100 * this.zhuheight
    },
    getHeightFuor(index) {
      return this.firstLabelFuor[index].capacity >= 100 ? this.zhuheight : this.firstLabelFuor[index].capacity / 100 * this.zhuheight
    },
    gitDaylist() {
      getoutputlist().then(res => {
        this.tableData = res.data.data
      })
    },
    EiteData(height) {
      console.log(height.start);
      const startTime = new Date(height.start).getTime();
      const systemTime = new Date().getTime();
      this.xeit = startTime < systemTime ? true : false;
      if (!this.xeit) {
        this.$message.error('未到当前时间');
      } else {
        this.formLabelAlign.name = height.start
        this.formLabelAlign.region = height.capacity
        this.dialogVisible = true
      }
      console.log(this.xeit);
    },
    handleResize() {
      // 更新窗口尺寸
      window.location.reload();
    },
    validateInput(event) {
      // 获取输入的值
      let value = event.target.value;
      // 只允许输入大于0的整数
      if (!/^\d+$/.test(value) || parseInt(value) <= 0) {
        this.isValid = false;
        this.formLabelAlign.region = ''; // 如果输入无效，清空输入框
      } else {
        this.isValid = true;
        this.formLabelAlign.region = parseInt(value); // 确保存储的是整数
      }
    },
    confirmDa() {
      console.log(this.formLabelAlign);
      let FameData = {
        start: this.formLabelAlign.name,
        capacity: Number(this.formLabelAlign.region)
      }
      eidrepair(FameData).then(res => {
        console.log(res);
        this.dialogVisible = false;
        this.getroletaskList()
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      })
    },
    getroletaskList() {
      roletask().then(res => {
        this.TimeDate = res.data.data
        this.totleList = this.TimeDate.map(item =>
          item.capacity.reduce((sum, current) => sum + current.capacity, 0)
        );
        this.firstLabels = this.TimeDate.map(item => {
          return {
            capacity: item.capacity[0].capacity,
            start: item.capacity[0].start
          };
        });
        this.firstLabelTwo = this.TimeDate.map(item => {
          return {
            capacity: item.capacity[1].capacity,
            start: item.capacity[1].start
          };
        });
        this.firstLabelThere = this.TimeDate.map(item => {
          return {
            capacity: item.capacity[2].capacity,
            start: item.capacity[2].start
          };
        });
        this.firstLabelFuor = this.TimeDate.map(item => {
          return {
            capacity: item.capacity[3].capacity,
            start: item.capacity[3].start
          };
        });
      })
      this.gitDaylist()
    },
  },
};
</script>

<style>
.full-height-div {
  display: flex;
  flex-direction: column;
  height: 98vh;
  width: 100%;
  background-color: #232832;
}

.tirleName {
  color: #fff;
  font-size: 32px;
  text-align: center;
  letter-spacing: 6px;
  padding: 5px 0 10px 0;
}

.TopBox {
  width: 92%;
  padding: 10px 0 0 0;
  display: flex;

  color: #FFF;
  position: fixed;
  left: 3.5%;
  /* background-color: pink; */

}

.tlitaData {

  display: flex;
  color: #fff;
  text-align: center;
}

.itemData {
  font-size: 1.2rem;
  height: 7rem;
  line-height: 25px;
  border: 1px solid #fff;
  text-align: center;
}

.centerData {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}

.FontReit {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 20px;
  color: #FFF;
}

.st-tbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.st-gbox {
  flex: 10;
  margin: 0 20px;
  border: 2px solid #FFF;
  display: flex;
  color: #FFF;
}

.bottTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 30px 10px 76px;
}

.bottTimeTwp {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* 居中对齐容器内部的内容 */

}

.label {
  width: 100%;
  height: 30px;
  padding-left: 20px;
  margin-top: 4px;
  font-size: 20px;
  /* 字体大小，可以根据需要调整 */
}

.dataTime {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 20px);
  /* 确保 .dataTime 有一个固定高度，减去上方和下方的间距 */
  justify-content: space-between;
}

.line-group {
  display: flex;
  align-items: center;
}

.line {
  width: 16px;
  height: 2px;
  border-bottom: 3px solid #fff;
  margin-right: 5px;
  /* 让 line 和数字之间有一点间距 */
}

.lineButt {
  width: 100%;
  height: 2px;
  margin-left: 10px;
  border-bottom: 3px solid #fff;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.line-label {
  width: 15px;
  height: 40px;
  /* 根据需要设置背景颜色 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 53px;
  margin-top: -30px;
  font-size: 21px;

}

.pillar {
  width: 66px;
  margin-top: -16px;
  background-color: #5cfe50;
  display: flex;
  margin: 0 20px;
  justify-content: center;
  align-items: flex-end;
  font-size: 20px;
  color: #23aaf2;
  cursor: pointer;
}


.cavasbox {
  width: 100%;
  flex: 1;
}

.toolNum {
  flex: 9;
  display: flex;
  justify-content: space-around;
  font-size: 18px;
}
</style>